<template>
  <div class="app-container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
      <el-form-item label="序号" >
        <el-input v-model="formInline.user" placeholder="请输入教练"></el-input>
      </el-form-item>
      <el-form-item label="是否签合同" label-width="150px">
        <el-select v-model="formInline.region" placeholder="活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否在职" label-width="150px">
        <el-select v-model="formInline.region" placeholder="请选择">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label-width="150px" label=" ">
        <el-button type="primary" icon="el-icon-search">查询</el-button>
        <el-button type="primary" @click="dialogTableVisible = true">+ 新增</el-button>
        <el-button type="info" plain icon="el-icon-download">导出</el-button>
        <el-button type="info" plain icon="el-icon-video-play">视频演示</el-button>
      </el-form-item>
    </el-form>

    <div style="height: 685px;">
      <el-table :data="tableData" border height="100%">
        <el-table-column  type="index" label="序号" width="80" align="center">
        </el-table-column>
        <el-table-column prop="id" label="ID" width="120" align="center">
        </el-table-column>
        <el-table-column prop="num" label="编号" width="120"  align="center">
        </el-table-column>
        <el-table-column prop="leader" label="教练" width="120" align="center"> 
        </el-table-column>
        <el-table-column prop="address" label="简称" align="center">
        </el-table-column>
        <el-table-column prop="tel" label="手机号码" width="120" align="center">
        </el-table-column>
        <el-table-column prop="carno" label="车牌号" width="120" align="center">
        </el-table-column>
        <el-table-column prop="address" label="教练证号" width="120" align="center">
        </el-table-column>
        <el-table-column prop="lidDate" label="教练证有效期" width="150" align="center">
        </el-table-column>
        <el-table-column prop="cartype" label="准教类别/车型" width="150" align="center">
        </el-table-column>
        <el-table-column prop="native" label="单位" align="center">
        </el-table-column>
        <el-table-column prop="ep" label="备注" align="center" width="180">
        </el-table-column>
        <el-table-column prop="contract" label="已签合同" align="center">
          <template slot-scope="scope">
            {{ scope.row.contract ? "已签" : "未签" }}
          </template>
        </el-table-column>
        <el-table-column prop="ser" label="在职" align="center">
          <template slot-scope="scope">
           {{ scope.row.ser ? "在职" : "离职" }}
           </template>
        </el-table-column>
        <el-table-column prop="address" width="180" label="操作" align="center" fixed="right">
          <el-button type="primary" plain size="mini">编辑</el-button>
            <el-button type="danger" plain size="mini" class="el-icon-delete">删除</el-button>
        </el-table-column>
      </el-table>
    </div>


    <div class="dialog">
      <el-dialog append-to-body title="新增教练" :visible.sync="dialogTableVisible" width="52%">
        <el-form size="small" :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="ID" label-width="120px">
            <el-input v-model="formInline.user" placeholder="请输入ID"></el-input>
          </el-form-item>
          <el-form-item label="编号" label-width="120px">
            <el-input v-model="formInline.user" placeholder="请输入编号"></el-input>
          </el-form-item>

          <el-form-item label="车牌号" label-width="120px">
            <el-input v-model="formInline.user" placeholder="请输入车牌号"></el-input>
          </el-form-item>
          <el-form-item label="准教类别/车型" label-width="120px">
            <el-input v-model="formInline.user" placeholder="请输入准教类别/车型"></el-input>
          </el-form-item>
          <el-form-item required label="教练姓名" label-width="120px">
            <el-input v-model="formInline.user" placeholder="请输入教练姓名"></el-input>
          </el-form-item>
          <el-form-item label="简称" label-width="120px">
            <el-input v-model="formInline.user" placeholder="请输入简称"></el-input>
          </el-form-item>
          <el-form-item label="教练证书号" label-width="120px">
            <el-input v-model="formInline.user" placeholder="请输入教练证书号"></el-input>
          </el-form-item>
          <el-form-item label="教练证有效期" label-width="120px">
            <el-input v-model="formInline.user" placeholder="请选择日期"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" label-width="120px">
            <el-input v-model="formInline.user" placeholder="请输入手机号码"></el-input>
          </el-form-item>
          <el-form-item label="手机短号" label-width="120px">
            <el-input v-model="formInline.user" placeholder="请输入手机短号"></el-input>
          </el-form-item>
          <el-form-item label="直营/挂靠" label-width="120px">
            <el-input v-model="formInline.user" placeholder="请输入手机短号"></el-input>
          </el-form-item>
          <el-form-item label="籍贯" label-width="120px">
            <el-input v-model="formInline.user" placeholder="请输入籍贯"></el-input>
          </el-form-item>
          <el-form-item label="合同" label-width="120px">
            <el-checkbox class="mr-1" v-model="checked">已签</el-checkbox>
            <el-checkbox v-model="checked">未签</el-checkbox>
          </el-form-item>
          <el-form-item label="是否在职" label-width="190px">
            <el-checkbox class="mr-1" v-model="checked">在职</el-checkbox>
            <el-checkbox v-model="checked">离职</el-checkbox>
          </el-form-item>
          <el-form-item label="入职日期" label-width="190px">
            <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="离职日期" label-width="120px">
            <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="单位" label-width="120px">
            <el-input v-model="formInline.user" placeholder="请输入单位"></el-input>
          </el-form-item>
          <el-form-item label="备注" label-width="120px">
            <el-input v-model="formInline.user" placeholder="请输入单位"></el-input>
          </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 分页 -->
    <div class="pagin">
      <el-pagination background :current-page="initParams.page" :page-sizes="[20, 50, 100, 150]"
        :page-size="initParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
/**
* @author        chenRong
* @time          2023-11-15 11:45:22  星期三
* @description   
**/

import { LeaderHandlerAPI } from '@/api/adminstare'
export default {
  data() {
    return {
      formInline: {
        user: '',
        region: ''
      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: 'hello'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: 'hello'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: 'hello'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: 'hello'
      }],
      gridData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      checked: false,
      value1: "",
      // 初始化参数
      initParams: {
        action: "leaderList",
        page: 1,
        pageSize: 20,
      },
      // 分页总条数
      total: 0,
    }
  },
  methods: {
    async getListData() {
      const result = await LeaderHandlerAPI(this.initParams)
      console.log(result);

      this.tableData = result.data
      this.total = result.total
    },
    // 当前显示的条数 发生改变时触发
    handleSizeChange(pageSize) {
      this.initParams.pageSize = pageSize || 20
      this.getListData()
    },
    // 当前页码发生改变时触发
    handleCurrentChange(page) {
      this.initParams.page = page || 1
      this.getListData()
    },
  },
  mounted() {
    this.getListData()
  }
}
</script>

<style lang="scss" scoped></style>